<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>过滤器的分类：全局过滤器和局部过滤器</h2>
        <div>{{ 'vue' | f1 }}</div>
        <div>{{ 'vue实例1' | quanju }}</div>
    </div>


    <div id="app2">
        <div>{{'vue实例2' | quanju }}</div>
        <div>{{'abc' | quanju2 }}</div>
    </div>

    <script>
        // 过滤器的分类：全局过滤器和局部过滤器
        //     全局过滤器:在所有vue实例中都可以使用
        //     局部过滤器:只能在当前的vue实例中使用

        // 定义全局过滤器：
        // Vue.filter(过滤器名，函数)

        // 使用全局过滤器格式与局部过滤器一样的：
        // {{ msg | 过滤器 }}

        Vue.filter('quanju',function(value){
            console.log( value )
            return 'quanju' + value
        })

        Vue.filter('quanju2',function(value){
            console.log( value )
            return 'quanju2' + value
        })

        const vm = new Vue({
            el: "#app",
            // 过滤器列表 - 局部过滤器
            filters: {
                f1 (value) {
                    return "f1" + value
                }
            }
        })

        const vm2 = new Vue({
            el: '#app2'
        })
     
    </script>

</body>
</html>